import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, BoxGeometry,
  MeshBasicMaterial, Mesh, WebGLRenderer,
  Vector3
} from 'three';

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    // 初版
    // const camera = new OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    // camera.position.set(0, 0, 5);
    // scene.add(camera);

    // 将照相机水平方向的距离减小为2: 水平方向被拉长了
    // const camera = new OrthographicCamera(-1, 1, 1.5, -1.5, 1, 10);
    // camera.position.set(0, 0, 5);
    // scene.add(camera);

    // 将照相机向右移动1个单位: 物体看上去向左移动了(好比你人往右站了，看起来物体就相对往左移动了)
    // const camera = new OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    // camera.position.set(1, 0, 5);
    // scene.add(camera);

    // 将视景体设置得更靠右: 之前向右移动照相机得到的效果是等价的
    // 为何?难道是因为默认视景体是在原点, 我们照相机也是设置在原点, 默认看想z轴负方向,
    // 照相机不动视景体右移, 里面的物体就左移?
    // const camera = new OrthographicCamera(-1, 3, 1.5, -1.5, 1, 10);
    // camera.position.set(0, 0, 5);
    // scene.add(camera);

    // 仰望正方体
    // 原本正方体在原点, 照相机也是原点, 且默认看像z轴负方向
    // 但当我们移动照相机位置到(4, -3, 5), 其他不变, 那便看不到正方形了
    // 因此应该调整看向哪个位置
    const camera = new OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
    camera.position.set(4, -3, 5);
    // camera.lookAt(new Vector3(0, 0, 0)); //羡辙的电子书上这么写, 但直接(0, 0, 0)也行(2021年5月26日)
    camera.lookAt(0, 0, 0);
    scene.add(camera);

    const box = new BoxGeometry(1, 1, 1);
    const material = new MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true
    });
    const mesh = new Mesh(box, material);
    scene.add(mesh);

    //渲染
    //获取canvas
    const canvas = document.getElementById('mainCanvas');
    //创建渲染器
    const renderer = new WebGLRenderer({
      canvas
    });
    //执行渲染操作
    renderer.render(scene, camera);
    
  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400px"
        height="300px"
      />
    );
  }
}

export default Index;